<template>
<div>
    <v-table
              is-horizontal-resize
              style="width:100%"
              multiple-sort
              @sort-change="sortChange"
              :columns="tableConfig.columns"
              :table-data="tableConfig.tableData"
              :show-vertical-border="true"
              row-hover-color="#eee"
              row-click-color="#edf7ff"
              :paging-index="(pageIndex-1)*pageSize"
      ></v-table>
      <div class="mt20 mb20 bold">
          <v-pagination @page-change="pageChange" @page-size-change="pageSizeChange" :total="total" :page-size="pageSize" :layout="['total', 'prev', 'pager', 'next', 'sizer', 'jumper']"></v-pagination>
       </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      pageIndex: 1,
      pageSize: 5,
      total: 20,
      orderBy: "name asc",
      tableConfig: {
        multipleSort: false,
        tableData: [],
        columns: [
          {
            field: "name",
            title: "姓名",
            width: 100,
            isResize: true,
            orderBy: "asc",
            titleAlign: "center",
            columnAlign: "center"
          },
          {
            field: "pwd",
            title: "密码",
            width: 100,
            isResize: true,
            orderBy: "desc",
            titleAlign: "center",
            columnAlign: "center"
          },
          {
            field: "email",
            title: "邮箱",
            width: 100,
            isResize: true,
            titleAlign: "center",
            columnAlign: "center"
          },
          {
            field: "phone",
            title: "手机号",
            width: 100,
            isResize: true,
            titleAlign: "center",
            columnAlign: "left"
          }
        ]
      }
    };
  },
  methods: {
    getError(response){ //请求错误处理
      if(response.responseJSON.code=="401"){ //需要登录，否则不做处理
          this.getLoginToken();
          this.getTableData(); //加载首页table
      }
    },
    getLoginToken() { //登录请求token
       $.ajax({
          type: "post",
          url: `http://127.0.0.1:8080/springboot-frame/login`,
          data: { name: "张三", pwd: "123" },
          async: false,
          success: res => {
            localStorage.setItem("token", res.data); //设置token到本地缓存中
          }
        });
    },
    //table数据
    getTableData() {
      $.ajax({
        type: "get",
        headers: {
          token: localStorage.getItem("token"),
          pageNum: this.pageIndex,
          pageSize: this.pageSize,
          orderBy: this.orderBy
        },
        url: "http://127.0.0.1:8080/springboot-frame/api/sys/user/list",
        data: {},
        async: false,
        success: response => {
          if (response.code == 200) {
            var data = response.data;
            this.tableConfig.tableData = data.list; //赋值数据
            this.pageIndex = data.pageNum; //当前页数
            this.total = data.total; //总页数
          }
        },
        error: response => {
            this.getError(response);
        }
      });
    },
    //排序事件
    sortChange(params) {
      this.orderBy = `name ${params.name},pwd ${params.pwd}`;
      this.getTableData();
    },
    //分页按钮点击事件
    pageChange(pageIndex) {
      this.pageIndex = pageIndex;
      this.getTableData();
    },
    //分页下拉选中事件
    pageSizeChange(pageSize) {
      this.pageIndex = 1;
      this.pageSize = pageSize;
      this.getTableData();
    }
  },
  created() {
    if (!localStorage.getItem("token")) {//没有token就请求
         this.getLoginToken();
    }
    this.getTableData(); //加载首页table
  }
};
</script>

<style scoped>
</style>
